<template>
    <div class="page-login">

        <div class="page-header">
            <!-- <img src="@/assets/logo.png" alt="费控系统">
      <span>费控发票系统</span> -->
        </div>

        <div class="form">
            <div class="left">
                <div class="one">
                    <span>智能OCR识别</span>
                    <span>费控平台</span>
                </div>
                <div class="two">
                    <span>Intelligent OCR identification fee control platform</span>
                </div>
                <div class="three">
                    <!-- <img src="@/assets/images/login/login-left-bg.png" alt="费控系统"> -->
                </div>
            </div>
            <div class="right">
                <div class="tab">
                    <view class="item" :class="{ active: tabIndex == '1' }">密码登录</view>
                    <view class="item" :class="{ active: tabIndex == '2' }">
                        <a :href="linkUrl">钉钉扫码</a>
                    </view>
                </div>
                <div class="form-box">
                    <el-form :model="formLogin" :rules="rules" ref="ruleForm">
                        <el-form-item label="">
                            <el-input v-model="formLogin.loginid" placeholder="用户名"></el-input>
                        </el-form-item>
                        <el-form-item label="">
                            <el-input v-model="formLogin.loginpwd" placeholder="密码"></el-input>
                        </el-form-item>
                    </el-form>
                    <!-- <loginFormItem ref="name" placeholder="请输入用户名" :value="formLogin.loginid" targetIndex="0"
            @onTextChange="onTextChange" @onInputBlur="onInputBlur">
          </loginFormItem>
          <loginFormItem ref="pwd" type="password" placeholder="请输入密码" :value="formLogin.loginpwd" targetIndex="1"
            @onTextChange="onTextChange" @onInputBlur="onInputBlur"></loginFormItem> -->
                    <el-button @click="submit('ruleForm')" class="button-login" v-loading="logining">
                        登录
                    </el-button>
                </div>
                <div class="tips">
                    <!-- <el-checkbox v-model="rememberLoginInfo" label="记住我的登录信息" size="large" @change="checkChange" /> -->
                    <!-- <el-link type="primary" @click="onForgetPwd">忘记密码？</el-link> -->
                    <!-- <el-link @click="userLogoff">注销</el-link> -->
                </div>
            </div>
        </div>
        <!-- <forgetPassword
      :visible="dialogVisible"
      :userMoblie="formLogin.loginid"
      @close="handleClose"
    ></forgetPassword> -->
        <!-- <registerUser ref="regRef" @regCallBack="toIndex()"></registerUser> -->
    </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
import Fingerprint2 from 'fingerprintjs2';
import storage from '@/utils/storage.js';

const account = createNamespacedHelpers(
  "admin/account"
);
const menu = createNamespacedHelpers(
  "admin/menu"
);

export default {
    data() {
        return {
            logining: false,
            tabIndex: '1',
            formLogin: {
                loginid: "ddmgddmg",
                loginpwd: "a123456",
            },
            rules: {
                loginid: [
                    { required: true, message: '用户名不能为空', trigger: 'change' }
                ],
                loginpwd: [
                    { required: true, message: '密码不能为空', trigger: 'change' }
                ],
            },
            linkUrl: "",
        }
    },
    mounted(){
        this.setFingerprint()
    },
    computed:{
        ...menu.mapState(['header']),
    },
    methods: {
        ...account.mapActions(['login','logout']),
        ...menu.mapActions(['getRemoteMenu']),
        onTextChange(e) {

        },
        onInputBlur(e) {

        },
        userLogoff(){
            this.logout({confirm: true})
        },
        setFingerprint() {
            const createFingerprint = () => {
                Fingerprint2.get((components) => {
                // 参数只有回调函数时，默认浏览器指纹依据所有配置信息进行生成
                    const values = components.map((component) => component.value) // 配置的值的数组
                    const murmur = Fingerprint2.x64hash128(values.join(''), 31) // 生成浏览器指纹
                    storage.setStorage('fingerprint', murmur)
                })
            }
            requestIdleCallback(createFingerprint)
        },
        submit(formName) {
            console.log(this)
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.logining = true
                    // if (rememberLoginInfo.value) {
                    //     storage.setStorage('loginid', formLogin.loginid)
                    //     storage.setStorage('loginpwd', formLogin.loginpwd)
                    // }
                    this.login({...this.formLogin}).then((res) => {
                        console.log("登录返回数据", res)
                        if (res.msgcode === 1) {
                            // 清空面包屑数据
                            // storage.removeStorage('asideActiveIndex')
                            // storage.removeStorage('breadList')
                            // 跳转到切换的系统首页
                            this.getRemoteMenu().then((resR) => {
                                console.log('', resR)
                                const menus = resR
                                if (menus && menus.length > 0) {
                                    const topMenu = this.header && this.header[0]
                                    const redirect = (this.$route.query && this.$route.query.redirect)
                                    this.$router.replace(redirect || '/index')
                                } else {
                                    // 没菜单权限
                                    // ElMessageBox.alert(
                                    //     '您的账号还未被授权，请联系企业管理员授权使用！',
                                    //     '提示',
                                    //     {
                                    //         confirmButtonText: '确定',
                                    //         type: 'warning',
                                    //         callback: (action) => {
                                    //             localStorage.clear()
                                    //             setFingerprint()
                                    //         },
                                    //     }
                                    // )
                                }
                            })
                        }
                        this.logining = false
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}

</script>

<style lang="scss" scoped>
.page-login {
    width: 100vw;
    height: 100vh;
    min-width: 1000px;
    min-height: 560px;
    overflow: auto;
    // background-image: url('@/assets/images/login/bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    .page-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 6.7vh;
        background-color: #FFFFFF;
        box-shadow: 0px 0px 10px 0px rgba(0, 16, 28, 0.1);
        padding: 0 2.9vw;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: row;

        img {
            width: 30px;
            height: 30px;
        }

        span {
            margin-left: 0.7vw;
            font-family: HiraginoSansGB-W6;
            font-size: 16px;
            color: #242A3A;
            font-weight: 600;
        }
    }

    .form {
        width: 1000px;
        height: 560px;
        background: #FFFFFF;
        box-shadow: 0 0 20px 0 rgba(175, 175, 175, 0.26);
        display: flex;

        .left {
            width: 600px;
            display: flex;
            flex-direction: column;
            padding: 35px 0 0 50px;
            box-sizing: border-box;
            background: #FAFDFF;

            .one {
                height: 72px;
                display: flex;
                align-items: flex-start;
                flex-direction: row;

                span:nth-child(1) {
                    font-family: HiraginoSansGB-W6;
                    font-size: 48px;
                    color: #2160FF;
                    font-weight: 600;
                }

                span:nth-child(2) {
                    font-family: HiraginoSansGB-W6;
                    font-size: 48px;
                    color: #242424;
                    font-weight: 600;
                }
            }

            .two {
                span {
                    font-family: HiraginoSansGB-W3;
                    font-size: 18px;
                    color: #BFBFBF;
                    font-weight: 300;
                }
            }

            .three {
                padding: 9px 0 0 20px;

                img {
                    width: 494.67px;
                    height: 371px;
                }
            }
        }

        .right {
            width: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 0 51px;
            box-sizing: border-box;

            .tab {
                width: 100%;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                border-bottom: 1px solid #D8D8D8;

                .item {
                    width: 64px;
                    height: 42px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-family: PingFangSC-Regular;
                    font-size: 16px;
                    color: #242424;
                    font-weight: 400;
                    margin-right: 50px;
                    cursor: pointer;

                    a {
                        text-decoration: none;
                        color: #242424;
                    }
                }

                .active {
                    width: 64px;
                    position: relative;
                    font-family: PingFangSC-Medium;
                    font-size: 16px;
                    color: #242424;
                    font-weight: 500;
                }

                .active::after {
                    content: "";
                    position: absolute;
                    bottom: -1px;
                    width: 100%;
                    height: 2px;
                    background: #2160FF;
                    border-radius: 1.5px;
                }
            }

            .form-box {
                margin-top: 20px;
                width: 100%;
                display: flex;
                flex-direction: column;

                .button-login {
                    width: 100%;
                    height: 40px;
                    background-image: linear-gradient(256deg, #2160FF 1%, #4599FF 100%);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-family: PingFangSC-Regular;
                    font-size: 14px;
                    color: #FFFFFF;
                    font-weight: 400;
                    border: none;
                }
            }

            .tips {
                width: 100%;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;

                :deep(.el-checkbox__label) {
                    color: #999999;
                    font-weight: 400;
                }
            }
        }
    }
}
</style>